<template>
  <div class="goods">
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @handleReset="handleResetFn"
      @handleSearch="handleSearchFn"
    ></PageSearch>
    <PageTable
      ref="pageTableRef"
      :tableConfig="tableConfig"
      pageName="goods"
      title="商品数据"
      AddDataName="新增商品"
      @handleAddFn="handleAddFn"
      @handleEditFn="handleEditFn"
    >
      <template #image="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.imgUrl"
          :preview-src-list="[scope.row.imgUrl]"
          fit="cover"
          preview-teleported
        />
      </template>
      <template #status="scope">
        <el-button :type="scope.row.status ? 'danger' : 'primary'">
          {{ scope.row.enable ? "上架" : "下架" }}</el-button
        >
      </template>
    </PageTable>
    <PageDialog
      :dialogConfig="dialogConfig"
      :defaultInfo="defaultInfo"
      pageName="goods"
      ref="PageDialogRef"
    ></PageDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PageSearch from "@/components/page-search";
import { searchFormConfig } from "./config/goodsSearchConfig";
import PageTable from "@/components/page-table";
import { tableConfig } from "./config/goodsConfig";

import PageDialog from "@/components/page-dialog";
import { dialogConfig } from "./config/goodsDialogForm";

import { usePageDialog } from "@/hooks/usePageDialog";
import { usePageSearch } from "@/hooks/usePageSearch";
export default defineComponent({
  name: "goods",
  components: {
    PageTable,
    PageDialog,
    PageSearch,
  },
  setup() {
    const { pageDialogRef, handleAddFn, handleEditFn, defaultInfo } =
      usePageDialog();

    const { pageTableRef, handleResetFn, handleSearchFn } = usePageSearch();

    return {
      tableConfig,
      dialogConfig,
      pageDialogRef,
      handleAddFn,
      handleEditFn,
      defaultInfo,
      searchFormConfig,
      pageTableRef,
      handleResetFn,
      handleSearchFn,
    };
  },
});
</script>

<style scoped></style>
